<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>AOD_Net Show Image</title>

  <style>
    #submitButton{
      height:40px;
      width:150px;
      background-color: #6ba9ec;
      margin-top:20px;
      margin-left:430px;
    }
  </style>
  <script>
    function downloadImg(){
      var img = document.getElementById('dehazeImg'); // 获取要下载的图片
      var url = img.src;                            // 获取图片地址
      var a = document.createElement('a');          // 创建一个a节点插入的document
      var event = new MouseEvent('click')           // 模拟鼠标click点击事件
      a.download = 'DehazeImg.png'                  // 设置a节点的download属性值
      a.href = url;                                 // 将图片的src赋值给a节点的href
      a.dispatchEvent(event)                        // 触发鼠标点击事件
    }
  </script>
</head>
<body>
<div>
  <h3>AOD_Net：</h3>
  <div style="float: left;">
	  <img th:src="@{'data:img/png;base64,'+${img_h}}"  height="500px" width="500px" />
	  <img th:src="@{'data:img/png;base64,'+${img_A}}" id="dehazeImg" height="500px" width="500px"/>
  </div>
  <div style="margin-top: 270px;margin-left: 1100px;">
  	<h4>运行时间(s)：</h4>
  	  <h4 th:text="${time_A}"></h4>
  </div>

  <button class="downloadBtn" type="button" onclick="downloadImg()" id="submitButton">下载图片</button>
</div>

<br>


</body>
</html>
